<template>
	<view style="background-color: #F6F6F6;min-height: 100vh;">
		<!-- <view class="search-view-container">
			<view class="search-view">
				<image class="search-view-icon" src="../../static/images/search@3x.png"></image>
				<input maxlength="50" class="search-view-input" placeholder="搜索" disabled="disabled" placeholder-class="placeholder" />
			</view>
		</view> -->
		<view class="flexr justify-between" style="padding:32rpx">
			<mPicker placeholder="性别" :range="sexOptions" v-model="params.gender" @change="initData"></mPicker>
			<mPicker placeholder="年龄" :range="ageOptions" v-model="params.age" @change="ageInitData" ></mPicker>
			<mPicker placeholder="门店" :range="storeOptions" range-key="name" v-model="params.nowStoreId" @change="initData"></mPicker>
			<mPicker placeholder="城市" :range="cityOptions" range-key="name" v-model="params.cityId" @change="initData">
			</mPicker>
		</view>
		<view class="people-box">
			<view class="flexr  people-item" v-for="itemData in list" @click="playerTtem(itemData.id)">
				<view class="people-img">
					<image :src="itemData.headImg||itemData.cover" mode="aspectFill" ></image>
					
				</view>
				<view class="flex-1 people-mi">
					<view class="flexr">
						<view class="people-name">{{ itemData.nickName }}</view>
						<view class="people-sex flexr " :style="{color:itemData.gender==1?'#12cced':'#FD83C8' }"> 
						<image v-if="itemData.gender==1" src="../../static/new/Iconboy.png" mode=""></image>
						  <image v-if="itemData.gender==0" src="../../static/new/iconGirl.png" mode=""></image>
						  {{getAge(itemData.birthday)}}
						</view>
					</view>
					<view class="people-desc  elone">{{itemData.sign|fomartSign}}</view>
				</view>
				<view class="flexc align-end" style="width: 120rpx">
					<view class="people-line elone" v-if="itemData.nowStoreName">
						{{itemData.nowStoreName}}
					</view>
					<view v-else class="people-line ">{{itemData.nowStoreName||'手机在线'}}</view>
					<view v-if="customerId!=itemData.id" class="people-want flexr" @click="sayHello(itemData)">
						<image v-if="itemData.isSayHello" src="../../static/new/helloList.png" mode=""></image>
						<image v-else src="../../static/new/msgList.png" mode=""></image>
						 {{itemData.isSayHello==1?'发消息':'打招呼'}}</view>
				</view>
			</view>
		</view>
	<!-- 	<view style="padding: 10rpx 32rpx;" class="listBox">
			<view v-for="item in list" class="list-item">
				<list :itemData="item" @change="sayHello" />
			</view>
		</view> -->
		<empty v-if="list.length<=0"></empty>

		<popContent ref="popContentBox" @change='initData'></popContent>
	</view>
</template>

<script>
	import {
		isLogin,
		toLogin,
		null2str,
		errorToShow,
		modelShow,
		successToShow
	} from '@/config/common.js';
	import {
		friendsList,
		getCity,
		AllStoreList,
		getMakeFriendsInfo,addFriend
	} from "@/constant/friend.js"
	import list from "./components/list.vue"
	import popContent from "./components/popContent.vue"
	import mPicker from "@/components/picker/m_picker.vue"
	
	export default {
		components: {
			list,
			popContent,
			mPicker
		},
		filters:{
			fomartSign(str){
				if(str&&str!='undefined'){
					return str
				}else{
					return '还没有签名～'
				}
			}
		},
		data() {
			return {
				params: {
					"nickName": "",
					"education": "",
					"hobbyus": null,
					"gender": null,
					"nowStoreId": null,
					"isPublic": null,
					searchStartAge:'',
					searchEndAge:'',
					pageNum: 1,
					pageSize: 10

				},
				list: [],
				sexOptions: [{
					label: '全部',
					id: -1
				}, {
					label: '女',
					id: 0
				}, {
					label: '男',
					id: 1
				}],
				ageOptions: [{
					label: '全部',
					id: -1
				}, {
					label: '18-24',
					id: 1,
					min: 18,
					max: 24
				}, {
					label: '24-28',
					id: 2,
					min: 24,
					max: 28
				}, {
					label: '28-30',
					id: 3,
					min: 28,
					max: 30
				}, {
					label: '30-35',
					id: 4,
					min: 30,
					max: 35
				}, {
					label: '35以上',
					id: 5,
					min: 35,
					max: 100
				}],
				storeOptions: [{
					label: '全部',
					id: -1
				}, {
					label: '门店1',
					id: 1
				}, {
					label: '门店2',
					id: 2
				}],
				cityOptions: [],
				total:0,
				customerId:''
			}
		},
		onShow() {
			if (!isLogin()) {
				toLogin();
			}
			this.getMyInfo()
			this.initData();
			this.getCityOptions()
			this.getAllStoreList()
		},
		onReachBottom() {
			if(this.list.length>=this.total) return
			this.params.pageNum++;
			this.getFriend();
		},
		onPullDownRefresh() {
			this.initData();
		},
		methods: {
			playerTtem(item_id) {
				if (isLogin()) {
					uni.navigateTo({
						url: '/pages/friend/kongjian?friendId=' + item_id
					});
				} else {
					toLogin();
				}
			},
			getAge(val){
				if(val){
					let currentYear = new Date().getFullYear() //当前的年份
					let calculationYear = new Date(val).getFullYear() //计算的年份
					const wholeTime = currentYear + val.substring(4) //周岁时间
					const calculationAge = currentYear - calculationYear //按照年份计算的年龄
					//判断是否过了生日
					if (new Date().getTime() > new Date(wholeTime).getTime()){
					  return calculationAge
					}else {
					  return calculationAge - 1
					}
				}else{
					return ''
				}
			     
			    },
			getMyInfo(){
				let id=uni.getStorageSync('customerId')
				this.customerId=id
				getMakeFriendsInfo(id).then(res=>{
					let info=res.data
					if(info.isAudit!=1){
						modelShow('提示', '您还未认证，认证后就可以打招呼啦', function() {
							uni.navigateTo({
								url: '/packagePages/mine/authentication'
							})
						},false,'','去认证');
						
					}
				})
			},
			sayHello(item) {
				let sendMsgType = item.isSayHello == 1 ? 1 : 2
				if (item.isSayHello == 1) {
					uni.navigateTo({
						url: '/packagePages/friend/msgDetail?friendId=' + item.id + '&receiverNickName=' + item
							.nickName
					})
				} else {
					// 打招呼
					addFriend({friendId:item.id}).then(res=>{
						uni.navigateTo({
							url: '/packagePages/friend/msgDetail?friendId=' + item.id + '&receiverNickName=' + item.nickName
						})
					})
					// this.$refs.popContentBox.openPopup(item.id, sendMsgType)
				}


			},
			getCityOptions() {
				getCity().then(res => {
					this.cityOptions = [{
						name: '全部',
						id: -1
					}]
					this.cityOptions = this.cityOptions.concat(res.data)
				})
			},
			initData() {
				this.params.pageNum = 1
				this.list = []
				this.getFriend()
			},
			ageInitData(e){
				let item=e.item
				if (this.params.age == -1) {
					this.params.searchStartAge = ''
					this.params.searchEndAge=''
				}else{
					this.params.searchStartAge = item.min
					this.params.searchEndAge= item.max
				}
				this.initData()
			},
			getFriend() {
				if (this.params.gender == -1) {
					this.params.gender = ''
				}
				if (this.params.cityId == -1) {
					this.params.cityId = ''
				}
				if (this.params.nowStoreId == -1) {
					this.params.nowStoreId = ''
				}
				if (this.params.age == -1) {
					this.params.searchStartAge = ''
					this.params.searchEndAge=''
				}
				
				friendsList(this.params).then(res => {
					let data = res.rows
					this.total=res.total
					if(this.list.length>=res.total) return
					uni.stopPullDownRefresh();
					if (this.params.pageNum > 1) {
						
						for (let i = 0; i < data.length; i++) {
							let obj = data[i];
							this.list.push(obj);
						}
						
					} else {
						this.list = data;
					}
				})
			},
			getAllStoreList(){
				AllStoreList().then(res=>{
					let storeOptions=[{name:'全部',id:-1}]
					this.storeOptions=storeOptions.concat(res.data) 
					console.log(this.storeOptions,'storeOptions---')
				})
			}

		}
	}
</script>
<style>
	@import url('../../css/common.css');
</style>
<style lang="scss">
	.search-view-container {
		background-color: #fff;
		height: 76rpx;
		width: 100%;
		display: flex;
		align-items: center;

		.more-btn {
			width: 30rpx;
			height: 30rpx;
			margin-left: auto;
			margin-right: 20rpx;
		}

		.search-view {
			display: flex;
			align-items: center;
			background-color: #f5f6fd;
			height: 60rpx;
			border-radius: 30rpx;
			margin-left: 30rpx;
			width: 100%;
			margin-right: 30rpx;

			&-icon {
				width: 28rpx;
				height: 28rpx;
				margin-left: 30rpx;
				margin-right: 10rpx;
			}

			&-input {
				font-size: $main-text-size-28;
				width: 80%;

				.placeholder {
					font-size: $main-text-size-28;
					font-family: 'SourceHanSansCN-Regular';
					color: $main-text-color-grey;
				}
			}
		}
	}

	.people-item {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		.people-mi {
			max-width: calc(100% - 300rpx);
			margin-right: 20rpx;
		}

		.people-img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 30rpx;
			overflow: hidden;
			margin-right: 20rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.people-name {
			color: #333;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		.people-sex {

			// margin-left: 30rpx;
			padding: 0 0rpx 0 20rpx;
			height: 40rpx;
			border-radius: 21px;
			// background: #FD83C8;
			color: #FFF;
			text-align: center;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;

			image {
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}

		}

		.people-desc {

			color: #979797;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			margin-top: 24rpx;
			width: 100%
		}
	}

	.people-line {
		width: 120rpx;
		text-align: right;
		color: #666;
		text-align: center;
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		position: relative;
		padding: 0 0rpx 0 14rpx;

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -3px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #84E44B;
			
		}
	}

	.people-want {
		min-width: 130rpx;
		height: 44rpx;
		border-radius: 20rpx;
		// background-color: #282828;
		border:1px solid #b6b6b6;
		border-radius: 30rpx;
		color: #333;
		text-align: center;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 44rpx;
		padding: 0 10rpx;
		margin-top: 20rpx;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.people-box {
		padding: 20rpx 32rpx;
	}

	.listBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.list-item {
		width: 49%;
		margin-bottom: 20rpx;

	}

	.list-item:nth-child(2n-1) {
		margin-right: 2%;
	}
</style>